<template>
    <div class="page-staff-manage">
        <van-search v-model="search" placeholder="购买者姓名/电话/订单ID" />
        <div class="picker-box">
            <div class="select text-normal" style="display: flex;flex-wrap: nowrap;">
                <span class="time-box">
                    <wx-picker :value="selectActive" :range="shopListpicker" @change="onStartDateChange">
                        <div class="picker-border-box fl">
                            {{shopListpicker[selectActive]}}
                        </div>
                    </wx-picker>
                </span>
                <span class="icon">&#xe60b;</span>
            </div>
            
            <TimePickerMemberOrder @search="onClickTimeSearch" />
        </div> 

        <div class="main">
            <div class="order-list" v-if="list.length">
                <OrderCardNew v-for="(order, index) in list"
                    :key="index"
                    :good-type="order.type"
                    :detail="order.detail"
                    :link-id="order.link_id"
                    :name="order.title"
                    :cover="order.cover"
                    :price="order.price"
                    :final="order.final_payment"
                    :delivery="order.delivery"
                    :is-prepay="order.is_prepay"
                    :buyer-confirm="order.buyer_confirm"
                    :original-price="order.original_price"
                    :coupon-pay="order.coupon_pay"
                    :total-price="order.price"
                    :status="order.status"
                    :count="order.number"
                    :buyer="order.name ? order.name : order.nickname"
                    :shop="order.shop"
                    :created-at="order.created_at"
                    :is-complete="order.is_finish"
                    :order="order"
                    :show-rebate-status="false"
                    :mobile="order.mobile">
                </OrderCardNew>
            </div>
            <ListEmpty v-else />
        </div>
    </div>
</template>

<script lang="ts">
// import OrderCard from '@/features/manage/recommendOrderCard.vue';

import OrderCardNew from '@/features/manage/recommendOrderCardNew.vue';
import ListEmpty from '@/components/list/listEmpty.vue';

import TimePickerMemberOrder from '@/features/manage/timePicker1.vue';

import store from '@/store';

import { Component, Vue, Watch } from 'vue-property-decorator';
import { WatchDelay } from '@/lib/utils';

@Component({
    name: 'RecommendOrder',
    components: {
        // OrderCard,
        OrderCardNew,
        ListEmpty,
        TimePickerMemberOrder,
    },
})
export default class RecommendOrder extends Vue {
    // 选择订单分类
    public selectActive: number = 0;
    public selectedThis: string = '';
    public onStartDateChange(picker: any) {
        this.selectedThis = this.shopList[picker.detail.value].text1;
        this.selectActive = picker.detail.value;
        this.getOrderList(true);
    }
    
    /** 搜索内容 */
    public search = '';
    public selectedPeople: any = null;

    public get userId() {
        return this.$route.params.userId;
    }
    public get recommendOrderList() {
        return store.state.partner.recommendOrderList;
    }
    public get list() {
        return this.recommendOrderList.list;
    }

    @WatchDelay('search', 500)
    @Watch('search')
    public onSearch() {
        this.getOrderList(true);
    }
    public shopListpicker: any[] = ['请选择','待审核','待提现','提现中','累计提现'];
    public shopList: ValueText1[] = [
        { text1: '所有', value: '' },
        { text1: '待审核', value: 'init' },
        { text1: '待提现', value: 'issued' },
        { text1: '提现中', value: 'ing' },
        { text1: '累计提现', value: 'total' },
    ];
    public selectedShops: number[] = [];
    public startDate: string | null = null;
    public endDate: string | null = null;
    // todo: 好像没有什么用
    public pickerTime: any = '全部';

    // 选择时间
    public onClickTimeSearch(obj) {
        this.startDate = obj.startDate;
        this.endDate = obj.endDate;
        if(!this.startDate && !this.endDate){
            this.selectActive = 0;
        }
        // this.getList(true);
        this.getOrderList(true);
    }
    @Watch('pickerTime')
    public onPickerTimeChange(val: any) {
        if (val === '全部') {
            this.startDate = null;
            this.endDate = null;
        } else {
            this.startDate = val;
            const arr = val.split('-');
            arr[2] = Number(arr[2]) + 1;
            this.endDate = arr.join('-');
        }
        this.getOrderList(true);
    }

    public async getOrderList(forceUpdate = false) {
        let times = '';
        // if(this.startDate && !this.endDate){
        //     times = this.startDate
        // }
        // if(!this.startDate && this.endDate){
        //     times = ''+ '~'+ this.endDate
        // }
        // if(!this.endDate && !this.startDate){
        //     times = this.startDate +'~'+ this.endDate
        // }
        this.startDate +'~'+ this.endDate
        const params: any = {
            type: this.shopList[this.selectActive].value,
            time: this.startDate +'~'+ this.endDate,
            search: this.search,
            offset: this.list.length,
            count: 10,
        };
        if (this.userId) {
            params.userId = this.userId;
        }
        if (forceUpdate) {
            params.offset = 0;
            params.forceUpdate = forceUpdate;
        }
        await store.dispatch('partner/getRecommendOrderList', params);
    }
    public async onReachBottom() {
        await this.getOrderList();
    }

    // 下拉刷新
    async onPullDownRefresh() {
        store.commit('utils/startPulldown');
        
        let times = '';
        this.startDate +'~'+ this.endDate
        const params: any = {
            type: this.shopList[this.selectActive].value,
            time: this.startDate +'~'+ this.endDate,
            search: this.search,
            offset: 0,
            count: 10,
            forceUpdate: true
        };
        if (this.userId) {
            params.userId = this.userId;
        }
        await store.dispatch('partner/getRecommendOrderList', params);

        store.commit('utils/endPulldown');
    }

    public created() {
        this.getOrderList(true);
        window.addEventListener('reachbottom', this.onReachBottom);
        window.addEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
        window.removeEventListener('pulldownrefresh', this.onPullDownRefresh);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-staff-manage {
    min-height: 100%;
    background-color: #f8f8f8;
 
    .main {
        background-color: #f8f8f8;
        .search-box {
            .title {
                padding-top: 12px;
            }
        }
        .order-wrap {
            padding: 0 12rpx;
        }
    }
     .outer-picker {
        position: relative;
        padding: 12px;
        .people-picker-box {
            box-sizing: border-box;
            width: 100%;
            padding: 10rpx 10px;
            border: 2rpx solid #BBBBBB;
            border-radius: 40rpx;
            .picker {
                position: relative;
                box-sizing: border-box;
                width: 100%;
                padding: 0 60rpx;
                &::before {
                    position: absolute;
                    left: 10px;
                    top: 50%;
                    transform: translateY(-50%);
                    font-family: 'iconfont';
                    content: "\e610";
                    font-size: 32rpx;
                    color: @grey-color;
                    pointer-events: none;
                }
            }
        }
        .options-box {
            box-sizing: border-box;
            position: absolute;
            z-index: 2;
            top: 96rpx;
            left: 24rpx;
            width:  375 * 2 - 48rpx;
            background-color: @white-color;
            border: 2rpx solid #BBBBBB;
            border-radius: 10rpx;
            .inner {
                width: 100%;
                max-height: 500rpx;
                overflow-y: scroll;
                .item {
                    position: relative;
                    box-sizing: border-box;
                    width: 100%;
                    height: 60rpx;
                    line-height: 60rpx;
                    text-align: center;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}

</style>
